<%--
  Created by IntelliJ IDEA.
  User: duanzx
  Date: 2021/2/22
  Time: 17:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>极光游戏（CLIPJOINT.COM）-全方位正版游戏服务平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ bp }/static/layui/css/layui.css">
    <link rel="shortcut icon" href="${ bp }/static/image/favicon.ico" />
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        * {margin: 0;padding: 0}
        a {cursor: pointer;text-decoration: none;}
        .top {width: 100%;height: 30px;padding-left: 60px;line-height: 30px;overflow: hidden;background-color:#2b2c31;}
        .show {color:rgba(255, 255, 255, 0.7) ;}
        .index {color:rgba(255, 255, 255, 0.7) ;}
        .primary {color: #ffffff;}
        .index:hover {color: #ffffff;}
        .community-content {padding: 110px 0 40px;width: 1200px;margin: 0 auto;position: relative;min-height: 100vh;}
        .community-content:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .community-content .tabs-container {min-height: 603px;margin-top: 30px;}
        .tabs-container .left-menu-tabs-buttons {float: left;width: 160px;height: auto;background: #282931;overflow: hidden;border-radius: 5px 5px 5px 5px;}
        .left-menu-tabs-buttons .first-title {font-size: 18px;color: #ffffff;margin: 0 20px 5px 20px;padding-bottom: 10px;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
        .left-menu-tabs-buttons .tabs-button {padding: 0;float: none;border-top: none;height: 42px;}
        .tabs-buttons .tabs-button {line-height: 54px;border-width: 4px 0 0;border-style: solid;border-color: transparent;font-size: 16px;}
        .tabs-button a {font-size: 16px;color: rgba(255, 255, 255, 0.6);display: block;line-height: 42px;text-align: center;}
        .tabs-button .active {color: #ff6900;background: rgba(255, 255, 255, 0.05)!important;}
        .active {color: #ff6900;background: rgba(255, 255, 255, 0.05);}
        .user-center {margin: 0 0 0 180px;background:transparent }
        .user-center .basic-info {font-size: 12px;background-color: #282931;padding: 50px 110px 40px 100px}
        .basic-info .top-info { height: 100px;margin-bottom: 65px;}
        .top-info .user-photo {margin: 0 auto ;position: relative }
        .user-photo img {width: 100px;height: 100px;border-radius: 50% 50% 50% 50%;border:0}
        .user-photo .uploader { position: absolute ;left: 70px;top: 70px;width:30px;height: 30px }
        .uploader input { position: absolute ;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}
        .top-info:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .form-block {margin-bottom: 15px;height: 30px;line-height: 30px;}
        .label-name {float: left;width: 100px;color: rgba(255, 255, 255, 0.7);font-size: 16px;height: 30px;line-height: 30px;}
        .form-block .form-control {float: left;font-size: 14px;margin-right: 20px;margin-left: 40px;color: rgba(255, 255, 255, 0.7);}
        .form-block input {width: 200px;height: 30px;line-height: 30px;padding: 0 10px;color: #b9c0ef;background: #212329;border-radius: 2px 2px 2px 2px;}
        .form-block:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .btn-wrap { margin-top: 190px}
        .btn-wrap:after { content: ".";display: block;height: 0;clear: both;visibility: hidden;}
        .btn-wrap .submit {border: none;text-align: center;box-sizing: border-box;background: #ff6900;color: #ffffff;cursor: pointer;outline: none;border-radius: 2px 2px 2px 2px;font-size: 18px;padding: 7px 25px;float: right;}
    </style>
</head>
<body>

<!-- 公共头部/首页 -->
<%@ include file="../common/index-header.jsp" %>

<div class="top">
    <span class="show">您的位置：</span>
    <a href="/" class="index">首页 》</a>
    <a href="" class="primary">个人中心</a>
</div>

<div class="community-content">
    <div class="tabs-container">
        <div class="tabs-buttons left-menu-tabs-buttons">
            <div class="tabs-button first-title">订单中心</div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=gamefactory" >我的订单</a>
            </div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=gamefactory" >我的游戏</a>
            </div>
            <div class="tabs-button first-title">我的财产</div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=wallet" >我的钱包</a>
            </div>
            <div class="tabs-button first-title">我的账户</div>
            <div class="tabs-button">
                <a href="/setting/info.jsp" class="active" >基本信息</a>
            </div>
            <div class="tabs-button">
                <a href="/setting/security.jsp" >账号安全</a>
            </div>
            <div class="tabs-button">
                <a href="${ bp }/user?method=dream" >愿望单</a>
            </div>
        </div>
        <form action="${ bp }/user?method=updateInfo" method="post" id="updateInfoForm">
            <div class="user-center">
                <div class="basic-info">
                    <div class="top-info">
                        <div class="user-photo">
                            <img src="${ bp }${ onlineUser.image }">
                            <div class="uploader">
                                <svg t="1614045739489" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3382" width="30" height="30"><path d="M667.925495 342.761099a12.47933 12.47933 0 0 1-11.40757-7.409992l-23.209407-52.188103c-6.66762-14.990917-26.906293-28.140252-43.313331-28.140252H434.002317c-16.40579 0-36.64571 13.149336-43.312082 28.140252l-23.20816 52.188103c-2.799802 6.295811-10.173611 9.130547-16.470669 6.330746s-9.130547-10.173611-6.330746-16.470669l23.20816-52.188103c10.711362-24.086529 39.751194-42.953998 66.11225-42.953998h155.994117c26.361056 0 55.400888 18.867469 66.11225 42.953998l23.209408 52.188103c2.801049 6.295811-0.033687 13.670867-6.329499 16.470669a12.429422 12.429422 0 0 1-5.061851 1.079246z" fill="#e6e6e6" p-id="3383"></path><path d="M811.315514 839.239293H212.685734c-32.917632 0-59.699157-26.780277-59.699158-59.697909V377.502844c0-32.917632 26.780277-59.699157 59.699158-59.699157h144.398147v24.953669H212.685734c-19.158179 0-34.745488 15.587309-34.745489 34.745488v402.03854c0 19.156932 15.587309 34.744241 34.745489 34.74424h598.62978c19.158179 0 34.745488-15.586062 34.745488-34.74424V377.502844c0-19.158179-15.586062-34.745488-34.745488-34.745488H666.918614v-24.953669h144.3969c32.91888 0 59.699157 26.780277 59.699157 59.699157v402.03854c0 32.917632-26.780277 59.69791-59.699157 59.697909z" fill="#e6e6e6" p-id="3384"></path><path d="M512 722.048131c-86.597964 0-157.050905-70.452941-157.050905-157.050905s70.452941-157.050905 157.050905-157.050906 157.050905 70.452941 157.050905 157.050906-70.451693 157.050905-157.050905 157.050905z m0-289.148142c-72.838512 0-132.097236 59.258725-132.097236 132.097237s59.258725 132.097236 132.097236 132.097236 132.097236-59.258725 132.097236-132.097236-59.258725-132.097236-132.097236-132.097237z" fill="#e6e6e6" p-id="3385"></path></svg>
                                <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png">
                            </div>
                        </div>
                    </div>
                    <div class="form-block">
                        <div class="label-name">昵称:</div>
                        <input type="text" id="username" name="username"  class="form-control" value="${ onlineUser.username }">
                    </div>
                    <div class="btn-wrap">
                        <button class="submit ">保存全部修改</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 公共底部 -->
<%@ include file="../common/footer.jsp" %>


<script src="${ bp }/static/js/jquery-3.5.1.js"></script>
<script type="text/javascript">

</script>
</body>
</html>
